<template>
    <div class="ma-content-block p-4">
        <div class="flex" style="margin-bottom: 16px;">
            <div class="flex_1" style="margin-right: 20px;">
                <!-- 左侧内容保持不变 -->
                <div class="flex justify_between">
                    <div style="font-size: 20px;font-weight: 600; margin-bottom: 12px;margin-right: 24px;flex:1">{{detailDate.event_name}}</div>
                    <div class="flex justify_end">
                        <a-tag :color="detailDate?.handle_status == 1?'#86909c':detailDate?.handle_status == 2?'#ff5722':'#00b42a'">
                            {{detailDate?.handle_status == 1?'待处理':detailDate?.handle_status == 2?'进行中':'已完成'}}
                        </a-tag>
                    </div>
                </div>
                <div class="">
                    <div class="flex" style="margin-bottom: 12px;">
                        <div style="width: 100px;">事件描述：</div>
                        <div style="color: rgba(0, 0, 0, .4);">{{detailDate.incident_text}}</div>
                    </div>
                    <div class="flex" style="margin-bottom: 12px;">
                        <div style="width: 100px;">事件等级：</div>
                        <div style="color: rgba(0, 0, 0, .4);">{{detailDate?.grade?.grade_name}}</div>
                    </div>
                    <div class="flex" style="margin-bottom: 12px;">
                        <div style="width: 100px;">事件类型：</div>
                        <div style="color: rgba(0, 0, 0, .4);">{{ handleEventype(detailDate?.event_type) }}</div>
                    </div>
                    
                    <!-- 新增轮播图部分 - 放在事件类型下方 -->
                    <div v-if="detailDate.incident_image?.length > 0" style="margin-top: 20px;">
                        <a-carousel
                            style="width: 205%; height: 524px; border-radius: 8px; overflow: hidden;"
                            :auto-play="true"
                            indicator-type="line"
                            show-arrow="hover"
                        >
                            <a-carousel-item v-for="(item, index) in detailDate.incident_image" :key="index">
                                <div style="display: flex; justify-content: center; align-items: center;  background: #f5f5f5;">
                                    <a-image
                                        v-if="item.type !== 'video'"
                                        :src="item.url"
                                        style="max-height: 180px; max-width: 100%; object-fit: contain;"
                                        :preview="false"
                                    />
                                    <video
                                        v-else
                                        :src="item.url"
                                        style="max-height: 180px; max-width: 100%; object-fit: contain;"
                                        controls
                                        @click.stop="handleVideo(item.url)"
                                    />
                                </div>
                            </a-carousel-item>
                        </a-carousel>
                    </div>
                </div>
            </div>
            
            <!-- 右侧内容 -->
            <div class="flex_1">
                <div class="flex justify_end" style="margin-bottom: 12px;">
                    <div style="margin-right: 40px;">{{detailDate?.created_at}}</div>
                    <div>责任人：{{detailDate?.duty_id?.nickname}}</div>
                </div>
                
                <!-- <div class="flex flex_wrap justify_end">
                    <div class="pointer" style="margin-bottom: 10px;margin-right: 10px;" v-for="(items,indexs) in detailDate.incident_image" :key="indexs">
                        <a-image width="60" height="60" :src="items.url"/>
                        <video :src="items.url" style="width: 60px;height: 60px;" v-if="items.type == 'video'" @click="handleVideo(items.url)"></video>
                    </div>
                </div> -->
            </div>
        </div>
        
        <!-- 时间线部分保持不变 -->
        <a-tabs default-active-key="1">
            <a-tab-pane key="1" title="事件进度">
                <a-timeline mode="left" labelPosition="relative">
                    <a-timeline-item :label="ite.created_at" v-for="(ite,ind) in detailDate?.info" :key="ind">
                        <div>
                            <div style="font-size: 12px;margin-bottom: 12px;color: rgba(0, 0, 0, .4);">{{ ite?.condition_text }}</div>
                            <div class="flex flex_wrap">
                                <div class="pointer" style="margin-bottom: 10px;margin-right: 10px;" v-for="(items,indexs) in ite?.incident_image" :key="indexs">
                                    <a-image width="60" height="60" :src="items.url" v-if="items.type == 'img'" />
                                    <video :src="items.url" style="width: 60px;height: 60px;" v-if="items.type == 'video'" @click="handleVideo(items.url)"></video>
                                </div>
                            </div>
                        </div>
                    </a-timeline-item>
                </a-timeline>
            </a-tab-pane>
        </a-tabs>
        
        <!-- 视频弹窗 -->
        <div class="more" v-if="isShowVideo" @click="handleColse"></div>
        <div class="video" v-if="isShowVideo">
            <video :src="videoUrl" controls :autoplay='true' style="width: 1000px;height: 562.5px;"></video>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, defineProps, onMounted, defineEmits } from "vue";
import secureEventManage from "@/api/secure/secureEventManage";
import { Message } from "@arco-design/web-vue";
import { request } from "@/utils/request.js";
import tool from "@/utils/tool";
import * as common from "@/utils/common";
import commonApi from "@/api/common";
const props = defineProps({
  info: {
    default: {},
  },
});
const emits = defineEmits(["shuaxin"]);
const detailDate = ref({});
onMounted(() => {
  request({
    url: "secure/eventManage/getIndex_info",
    method: "get",
    params: {
      id: props.info.id,
    },
  }).then((res) => {
    let _data = res.data;
    let imageRegex = /\.(jpg|jpeg|png|gif)$/i;
    let videoRegex = /(mp4|avi|mov)/i;
    _data.map((v, i) => {
      let arr = [];
      let arrs = [];
      let type = "";
      arr = v.incident_image.split(",");
      arr.map((vv, ii) => {
        if (imageRegex.test(vv)) {
          type = "img";
        }
        if (videoRegex.test(vv)) {
          type = "video";
        }
        arrs.push({ url: vv, type });
      });
      if (v.info != null) {
        v.info.map((vv, ii) => {
          let infoUrl = [];
          let infoUrls = [];
          let types = "";
          infoUrl = vv.incident_image.split(",");
          infoUrl.map((vvv, iii) => {
            if (imageRegex.test(vvv)) {
              types = "img";
            }
            if (videoRegex.test(vvv)) {
              types = "video";
            }
            infoUrls.push({ url: vvv, type: types });
          });
          vv.incident_image = infoUrls;
        });
      }
      v.incident_image = arrs;
    });
    detailDate.value = _data[0];
  });
  commonApi.getDict("event_type").then((res) => {
    eventTypeList.value = res.data;
  });
});
const isShowVideo = ref(false);
const videoUrl = ref("");
const eventTypeList = ref([]);
const incident_image = ref([
  {
    type: "img",
    url: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
  },
  {
    type: "video",
    url: "https://wstsecure-api.chuangxing.ren/uploadfile/20241211/725376960599142401.mp4",
  },
]);
const handleCompleted = (row) => {
  request({
    url: "secure/eventManage/Completed",
    method: "get",
    params: {
      id: row.id,
    },
  }).then((res) => {
    Message.success("完结成功！");
    emits("shuaxin");
  });
};
const handleEventype = (e) => {
  let name = "";
  eventTypeList.value.map((v, i) => {
    if (v.key == e) {
      name = v.title;
    }
  });
  return name;
};

const handleVideo = (e) => {
  videoUrl.value = e;
  isShowVideo.value = true;
};
const handleColse = () => {
  isShowVideo.value = false;
};
</script>
<style scoped lang="less">
.cell {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.pointer {
  cursor: pointer;
}
.more {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.video {
  width: 1000px;
  height: 562.5px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

/* 新增轮播图样式 */
:deep(.arco-carousel-arrow) {
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  &:hover {
    background: rgba(0, 0, 0, 0.6);
  }
}
</style>
<script>
export default { name: "secure:eventManagementDetails" };
</script>
